<template>
    <div class="CommonHeader">

        <div class="Header-left">
            <i @click="openAside()" class="open" :class="Aside == true ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
        </div>
        <div class="Header-right">
            <div class="item right-search" @click.stop="dialogTableVisibleSearch = true">
                <i class="el-icon-search"></i>
            </div>

            <!-- 搜索框 -->
            <el-dialog :visible.sync="dialogTableVisibleSearch" :modal-append-to-body="false" width="800px">
                <div class="Search">
                    <form action="https://www.baidu.com/s" target="_blank">
                        <div class="textborder">
                            <input type="text" class="textinput" id="textinput" name="word" v-model="searchInput">
                        </div>
                        <div class="down_submit" target="_blank">
                            <input type="submit" value="搜索">
                        </div>
                    </form>
                    <!-- 关键词 -->
                    <div class="Search-text">
                        <div class="title">
                            关键词
                        </div>
                        <div class="text-box">
                            <ul class="box-ul">
                                <li class="li" v-for="item in guanjianList" :key="item.name" @click="getInput(item.name)">
                                    <span>{{ item.name }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </el-dialog>


            <div class="item right-tip" @click="getRed()">
                <i class="el-icon-bell"></i>
                <div class="red-tip" :class="redTip == true ? 'isactive' : ''">
                </div>
            </div>

            <!-- 提示框 -->
            <el-dialog title="登录/注册提示" :visible.sync="dialogTableVisibleTip">
                <div class="tip-box">
                    <ul>
                        <li v-for="item in userRegister" :key="item.id">
                            <div v-if="item.createTime">
                                <span class="time">
                                    {{ item.createTime }}
                                </span>
                                用户
                                <span class="name">
                                    {{ item.userName }}
                                </span>
                                手机
                                <span class="phone">
                                    {{ item.phoneNum }}
                                </span>
                                成功
                                <span class="tips">
                                    注册
                                </span>

                            </div>
                            <div v-else>
                                <span class="time">
                                    {{ item.dengluTime }}
                                </span>
                                用户
                                <span class="name">
                                    {{ item.userName }}
                                </span>
                                手机
                                <span class="phone">
                                    {{ item.phoneNum }}
                                </span>
                                成功
                                <span class="tip">
                                    登录
                                </span>

                            </div>

                        </li>


                    </ul>
                </div>

                <!-- <el-empty description="没有动态"></el-empty> -->


            </el-dialog>


            <div class="user">
                <!-- 登录的 -->
                <div class="user-box" @mouseover="mouseOver" @mouseleave="mouseLeave">
                    <div class="item right-user">
                        <div class="user-img" v-if="userInfo.logo">
                            <img :src="userInfo.logo" alt="">
                        </div>

                        <div class="user-img" v-else>
                            <img src="../assets/user/userlogo.png" alt="">
                        </div>
                        <h3 class="user-name">
                            {{ userInfo.userName }}
                        </h3>
                    </div>


                    <!-- 个人信息 -->
                    <div class="right-infor" :class="infor == true ? 'is-active' : ''">
                        <ul class="infor-list">
                            <li class="infor-item">

                                <span @click="geren()">个人中心</span>

                                <!-- 个人中心 -->
                                <el-dialog title="个人信息" :visible.sync="dialogTableVisible" :modal-append-to-body="false"
                                    width="300px">

                                    <div class="Infor">
                                        <div class="touxiang" v-if="userInfo.logo">
                                            <span>头像：</span>
                                            <img :src="userInfo.logo" alt="">
                                        </div>
                                        <div class="touxiang" v-else>
                                            <span>头像：</span>
                                            <img src="../assets/user/userlogo.png" alt="">
                                        </div>

                                        <div class="name">
                                            <span>账号名：</span>
                                            <span>{{ userInfo.userName }}</span>
                                        </div>
                                        <div class="phone">
                                            <span>手机号：</span>
                                            <span>{{ userInfo.phoneNum }}</span>
                                        </div>
                                        <div class="pass">
                                            <span>密码：</span>
                                            <span>{{ userInfo.passWord }}</span>
                                        </div>
                                    </div>

                                </el-dialog>


                            </li>
                            <li class="infor-item">
                                <span @click="goExit()">退出登录</span>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>


    </div>
</template>
<script>
import { getUserList, getUserInfor } from "@/api/index";


export default {
    name: "CommonHeader",
    data() {
        return {
            Aside: true,
            infor: false,
            userState: true,
            showBox: true,
            userTip: '',
            userInfo: {},
            dialogTableVisible: false,
            dialogTableVisibleSearch: false,
            dialogTableVisibleTip: false,
            guanjianList: [
                {
                    name: '汽车'
                },
                {
                    name: '汽车系统'
                },
                {
                    name: '汽车CRM'
                },
            ],
            searchInput: "",
            userRegister: [],
            redTip: true
        }
    },
    // props: ['infors'],

    methods: {
        // 获取token
        getUserToken() {
            let token = window.sessionStorage.getItem('token')
            // console.log(token);
            this.userTip = token
        },

        // // 获取用户
        async getUserList() {
            const _data = await getUserList()
            const _res = await (_data).data;

            for (let i = 0; i < _res.length; i++) {
                if (_res[i].phoneNum == this.userTip) {
                    this.userInfo = _res[i]
                }
            }
        },

        // 侧边栏的显示与隐藏
        openAside() {
            if (this.Aside == true) {
                this.Aside = false
                this.$emit('zidingyi', this.Aside)
            } else {
                this.Aside = true
                this.$emit('zidingyi', this.Aside)
            }
        },

        // 个人信息的显示与隐藏
        mouseOver() {
            this.infor = true
        },
        mouseLeave() {
            if (this.dialogTableVisible == true) {
                this.infor = true
            } else {
                this.infor = false
            }
        },


        // 退出登录
        goExit() {
            this.$confirm('您确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });

                var storage = window.sessionStorage;
                storage.clear();

                this.$router.push('/login')
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });
        },

        // 打开个人中心
        geren() {
            this.dialogTableVisible = true
        },
        getRed() {
            this.dialogTableVisibleTip = true
            this.redTip = false
        },

        // 关键词的转移
        getInput(item) {
            document.getElementById('textinput').focus();
            this.searchInput = item
        },


        // 获取用户登录注册信息
        async getUserInfor() {
            const _data = await getUserInfor()
            const _res = await (_data).data;
            // console.log(_res);
            this.userRegister = _res
        }
    },
    mounted() {
        this.getUserToken()
        this.getUserList()
        this.getUserInfor()
    }

}

</script>

<style lang="less" scoped>
.CommonHeader {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;


    .Header-left {
        display: flex;
        align-items: center;

        .open {
            cursor: pointer;
            font-size: 25px;
        }
    }

    .Header-right {
        position: relative;
        display: flex;
        align-items: center;

        .item {
            i {
                font-size: 18px;
                padding: 10px 10px;
                cursor: pointer;
            }
        }

        .Search {
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            // background-color: antiquewhite;
            border-radius: 10px;

            form {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100px;
                box-sizing: border-box;

                .textborder {
                    width: 70%;
                    height: 44px;

                    .textinput {
                        display: block;
                        width: 100%;
                        height: 44px;
                        padding: 12px 16px;
                        margin: 0;
                        border-radius: 10px 0 0 10px;
                        border: 2px solid #1d5ef6;
                        border-right: 0;
                        background: #fff;
                        outline: none;
                        box-sizing: border-box;
                    }
                }

                .down_submit {
                    height: 44px;

                    input {
                        display: block;
                        width: 108px;
                        height: 44px;
                        border: 0;
                        background-color: #4e6ef2;
                        border-radius: 0 10px 10px 0;
                        font-size: 17px;
                        color: #fff;
                        box-shadow: none;
                        font-weight: 400;
                        cursor: pointer;
                    }
                }
            }

            .Search-text {
                width: calc(70% + 108px);
                margin: 0 auto;
                // background-color: #1d5ef6;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                    text-align: left;
                    line-height: normal;
                }

                .text-box {
                    text-align: left;

                    .box-ul {
                        display: flex;
                        flex-wrap: wrap;
                        margin: 0;
                        padding: 0;

                        .li {
                            margin: 8px 8px;
                            padding: 2px 5px;
                            border-radius: 3px;
                            color: #fff;
                            line-height: normal;
                            background-color: rgb(221, 86, 86);
                            cursor: pointer;
                        }

                        .li:nth-child(2n) {
                            background-color: rgba(160, 205, 200, 0.722);
                        }

                        .li:nth-child(3n) {
                            background-color: rgba(19, 255, 70, 0.722);
                        }
                    }

                }


            }




        }

        .right-tip {
            position: relative;

            .red-tip {
                display: none;
            }

            .red-tip.isactive {
                display: block;
                position: absolute;
                top: 20px;
                left: 20px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: red;
            }
        }


        .tip-box {
            text-align: center;
            line-height: 40px;

            ul {
                margin: 0;
                padding: 0;

                .time {
                    color: #4e6ef2;
                }

                .name {
                    color: #fb5316;
                }

                .phone {
                    color: #ee32fc;
                }

                .tips {
                    color: #ff0000;
                }

                .tip {
                    color: #1d5ef6;
                }
            }
        }

        .user {

            .user-box {
                position: relative;

                .right-user {
                    position: relative;
                    display: flex;
                    align-items: center;
                    height: 60px;
                    cursor: pointer;

                    .user-img {
                        width: 30px;
                        margin: 0 10px;
                        height: 30px;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            display: block;
                            width: 30px;
                        }
                    }

                    .user-name {
                        overflow: hidden;
                        width: 80px;
                        height: 60px;
                        line-height: 60px;
                        padding-left: 10px;
                        text-align: left;
                        font-size: 16px;
                    }
                }


                .right-infor {
                    display: none;
                    position: absolute;
                    top: 62px;
                    left: 10px;
                    border-radius: 5px;
                    box-shadow: 5px 5px 5px #ccc;
                    overflow: hidden;
                    background-color: rgb(255, 255, 255);
                    z-index: 99;

                    .infor-list {
                        margin: 5px auto 0;
                        padding: 0;


                        .infor-item {
                            margin: 0;
                            padding: 8px 25px;
                            line-height: 30px;
                            background-color: #fff;
                            transition: .5s ease all;
                            cursor: pointer;

                            .Infor {
                                .touxiang {
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    margin-bottom: 20px;

                                    img {
                                        width: 80px;
                                        border-radius: 50%;
                                    }
                                }

                                .name {
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    margin-bottom: 20px;
                                }

                                .phone {
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    margin-bottom: 20px;
                                }

                                .pass {
                                    display: flex;
                                    align-items: center;
                                    width: 100%;
                                    margin-bottom: 20px;
                                }




                            }



                        }

                        .infor-item:hover {
                            background-color: #ccc;
                        }
                    }
                }

                .right-infor.is-active {
                    display: block;
                }
            }

            .user-none {
                cursor: pointer;
            }


        }


    }

}
</style>